$(function() {
    // ---------------  创建剪裁区 ------------------
    // - 找到剪裁区的图片 （img#image）
    var $image = $('#image');
    // - 设置配置项
    var option = {
        // 纵横比(宽高比)
        aspectRatio: 1, // 正方形
        // 指定预览区域
        preview: '.img-preview' // 指定预览区的类名（选择器）
    };
    // - 调用cropper方法，创建剪裁区
    $image.cropper(option);

    // 点击上传，可以选择图片
    $('#upload').click(function() {
        $('#file').click();
    })
    $('#file').change(function() {
            console.dir(this);
            // 1. 找到选择的图片（文件对象）
            var fileObj = this.files[0];
            // 2. 根据文件对象，生成一个临时的url，用于访问被选择的图片
            var url = URL.createObjectURL(fileObj);
            // 3. 更换剪裁区的图片的src属性
            $image.cropper('destroy').attr('src', url).cropper(option);
        })
        // ---------------  点击 确定 的时候，剪裁图片，转成base64格式，提交字符串到接口 ----------
    $('#sure').click(function() {
        console.log(111)
        var i = $image.cropper('getCroppedCanvas', {
            width: 100,
            height: 100
        });
        var str = i.toDataURL();
        $.ajax({
            type: 'POST',
            url: '/my/update/avatar',
            data: { avatar: str },
            success: function(res) {
                layer.msg(res.message);
                if (res.status === 0) {
                    // 更换成功，调用父页面的 getUserInfo() ，重新渲染头像
                    window.parent.getUserInfo();
                }
            }
        })
    })
})